<template>
	<view class="container">
		<u-sticky>
			<u-tabs :list="tabsList" :is-scroll="false" :current="tabsIndex" @change="tabsChange" active-color="#6D4BBE" inactive-color="#333333" font-size="32" bar-height="6" bar-width="100"></u-tabs>
			<wd-calendar-week @click="weekClick"></wd-calendar-week>
		</u-sticky>
		<!-- mescroll-body start -->
		<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="class-list">
				<view class="class-list-card" v-for="(item,index) in dataList" :key="index">
					<view class="class-list-item" @click="appointDetail" :data-index="index">
						<view class="class-list-item__avatar">
							<image class="avatar" :src="item.course.image" mode="aspectFill"></image>
							<view class="label">预约</view>
							<view class="number" @click.stop="dropSwitch(index)"><text>{{item.appointment.length}}</text>/{{item.course.people_count}} <u-icon class="arrow" :name="item.isSelected?'arrow-down':'arrow-up'" color="#D7D7D7" size="18"></u-icon></view>
						</view>
						<view class="class-list-item__content" :data-index="index">
							<view class="title">{{item.course.name}}</view>
							<view class="star">难易度：<u-rate :current="item.course.degree" :disabled="true" inactive-icon="star-fill" inactive-color="#DFDFDF" active-color="#F5C822" size="24" gutter="6"></u-rate></view>
							<view class="info">教练：{{item.course.teacher.name}}</view>
							<view class="info">教室：{{item.classroom.name}}</view>
							<view class="info">时间：{{item.start_time}}-{{item.end_time}}</view>
						</view>
						<view class="class-list-item__action">
							<!-- <view class="button" :class="{'active':item.status}" @click="link">{{item.status?'已预约':'预约'}}</view> -->
						</view>
					</view>
					<view class="class-list-user" v-if="item.appointment.length>0 && item.isSelected">
						<view class="title">已预约上课的学员</view>
						<view class="thumb-box">
							<image class="thumb" v-for="(img,idx) in item.appointment" :key="idx" :src="img.avatar" mode="aspectFill"></image>
						</view>
					</view>
					<view class="class-list-comment" @click="comment(item.id)">查看课程评价</view>
				</view>
			</view>
		</mescroll-body>
		<!-- mescroll-body end -->
		<!-- 底部导航栏 start -->
		<!-- <wd-tabbar class="wd-tabbar" iconSize="44" :list="wd_tabbar_teacher" :isTabBar="false"></wd-tabbar> -->
		<!-- 底部导航栏 end -->
		<view class="timetable--fixed" @click="myschedule">
			<image class="cart" src="../../../static/icons/icon_timetable.png" mode="aspectFit"></image>
			<text>本周课表</text>
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				date: '',
				userinfo:{},
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto:false,
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '../../../../static/images/icon_empty-class.png',
						tip: '当天暂无课程安排哦'
					}
				},
				swiperList: [
					{
						image: '../../../static/images/img_banner.png',
						url: 'url-1'
					},
					{
						image: '../../../static/images/img_banner.png',
						url: 'url-2'
					}
				],
				tabsList: [],
				tabsIndex: 0,
				dataList: [
					
				]
			}
		},
		onLoad(){
			this.fetchUserinfo();
		},
		methods: {
			
			//获取信息
			fetchUserinfo(){
				var that = this;
				that.$core.get({url:'fitness.user/index',data:{},success:(ret)=>{
					if(!ret.data.teacher_status){
						uni.showModal({
							title: '提示',
							content: '您不是老师，不可查看',
							success:function(res) {
								uni.navigateBack({
									
								})
							}
						});
						return false;
					}
					that.userinfo = ret.data;
					that.fetchCategory();
				}});
			},
			
			/**
			 * 预约详情
			 */
			appointDetail(e){
				var index = e.currentTarget.dataset.index;
				var arrangement = this.dataList[index];
				uni.navigateTo({
					url: '/pages/teacher/signUp/signUp?arrangement_id='+arrangement.id
				})
			},
			
			//获取分类
			fetchCategory(){
				var that = this;
				let shop = this.$core.getCurrentShop();
				var shop_id = shop.id;
				this.$core.get({url:'fitness.common/category',data:{shop_id:shop_id},success:(ret)=>{
					that.tabsList = ret.data;
					this.mescroll.resetUpScroll()
				}});
			},
			
			tabsChange(index) {
				this.tabsIndex = index;
				this.mescroll.resetUpScroll()
			},
			weekClick(date) {
				this.date = date;
				this.mescroll.resetUpScroll()
			},
			
			/*上拉加载的回调*/
			upCallback(page) {
				var that = this;
				var tabsList = that.tabsList;
				var tabsIndex = that.tabsIndex;
				var category_id = tabsList[tabsIndex]?tabsList[tabsIndex].id:'';
				var date = that.date;
				var teacher_id = that.userinfo.teacher?that.userinfo.teacher.id : 0;
				if(teacher_id<=0) return false;
				if(category_id == '') return false;
				that.$core.post({url:'fitness.teacher/index',data:{teacher_id:teacher_id,course_category_id:category_id,date:date,page:1,limit:99},success:(ret)=>{
					if(page.num == 1) that.dataList = []; //如果是第一页需手动制空列表
					that.dataList = that.dataList.concat(ret.data.data); //追加新数据
					 that.mescroll.endSuccess(ret.data.data.length);
				}});
			},
			
			dropSwitch(index) {
			    let data = this.dataList[index]
			    let isSelected = data.isSelected
				this.$set(data,'isSelected',!isSelected)
			},
			
			comment(arrangement_id){
				uni.navigateTo({
					url:'/pages/teacher/classDiscuss/classDiscuss?arrangement_id='+arrangement_id
				})
			},
			
			//本周课表
			myschedule(){
				uni.navigateTo({
					url: '/pages/teacher/schedule/schedule?teacher_id='+this.userinfo.teacher.id
				})
			},
			
			link() {
				this.$utils.href('/pages/class/classDetail/classDetail')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F6F6;
	}
	.timetable--fixed {
		position: fixed;
		right: 24rpx;
		bottom: 150rpx;
		z-index: 99;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 96rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0 4rpx 14rpx 0 rgba(109,75,190,0.2);
		border: 1rpx solid #6D4BBE;
		border-radius: 99px;
		
		image {
			display: block;
			width: 32rpx;
			height: 32rpx;
		}
		text {
			display: block;
			margin-top: 3rpx;
			text-align: center;
			line-height: 22rpx;
			font-size: 16rpx;
			color: #6D4BBE;
		}
	}
	
</style>
